<template lang="pug">
    div(class="login-panel")
        div(class="login-panel__window glass")
            div(id="login", class="login-panel__window_text")
                i(class="el-icon-loading") 
                span 登陆中......
</template>

<script>
import axios from "@/plugins/axios";
import util from "@/libs/util";

export default {
  methods: {
    wxAuthorizition: function(wxInfo) {
      location.href = wxInfo.authorizeUrl;
    },
    tokenLogin: function() {
      const authArgs = this.getAuthArgs();
      const options = { url: "token/weixin", data: authArgs, method: "post" };

      var vm = this;
      axios(options)
        .then(tokenInfo => {
          util.cookies.set("token", tokenInfo.token);
          util.cookies.set("wxuid", tokenInfo.user.id);
          util.cookies.set("avatar", tokenInfo.user.avatar);
          util.cookies.set("nickname", tokenInfo.user.nickname);
          console.log(location.href);
          // 替换URL参数 只需要pathname和hash 不需要search部分
          history.replaceState({}, {}, `${location.pathname}${location.hash}`);
          this.$router.replace(vm.$route.query.redirect || "/");
        })
        .catch(() => {
          // todo: code过期等情况处理
        });
    },
    /**
     * 获取URL上的授权参数
     */
    getAuthArgs() {
      const code = util.getQueryString("code");
      const state = util.getQueryString("state");
      return { code, state };
    }
  },
  created: function() {
    const info = this.getAuthArgs();
    if (!info.code || !info.state) {
      const prefix = process.env.NODE_ENV !== "development" ? "/" : "/api/";
      location.href = `${prefix}weixinAuth/?callback_url=${encodeURIComponent(
        location.href
      )}`;
    } else {
      // 获取token进行登陆
      this.tokenLogin();
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.glass {
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background-position: center top;
  background-size: cover;
  z-index: 1;
  box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.2),
    0px 0px 1px 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(80px);
    z-index: -3;
    margin: -30px;
  }
}

.login-panel {
  background: -webkit-radial-gradient(
      0% 100%,
      ellipse cover,
      rgba(35, 24, 82, 0.22) 10%,
      rgba(138, 114, 76, 0) 40%
    ),
    linear-gradient(
      to bottom,
      rgba(57, 173, 219, 0.25) 0%,
      rgba(42, 60, 87, 0.4) 100%
    ),
    linear-gradient(135deg, #670d10 0%, #092756 100%);
  height: 100vh;
  display: flex;
  //   justify-content: center;
  flex-direction: column;
  align-items: center;

  &__window {
    width: 50%;
    height: 180px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 31.8vh;

    &_text {
      @font-size: 16px;
      font-size: @font-size;
      height: @font-size;
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      width: 100%;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
